<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'></i-form>
    <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
interface DataFormInterFace {
    datePicker: string;
    time: Array<any>;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                datePicker: '',
                time: []
            },
            fieldDataList: [
                {
                    type: 'datePicker', // form表单类型
                    label: '出生日期', // 字段描述信息
                    field: 'datePicker', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请填写日期',
                            trigger: 'change',
                            type: 'object'
                        }
                    ]
                },
                {
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'time', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请选择时间',
                            trigger: 'change',
                            type: 'array'
                        }
                    ]
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        <i-form ref='myForm' :dataForm='dataForm'> </i-form> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                datePicker: '',
                time: []
            },
            fieldDataList: [
                {
                    type: 'datePicker', // form表单类型
                    label: '出生日期', // 字段描述信息
                    field: 'datePicker', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请填写日期',
                            trigger: 'change',
                            type: 'object'
                        }
                    ]
                },
                {
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'time', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请选择时间',
                            trigger: 'change',
                            type: 'array'
                        }
                    ]
                }
            ]
        }) `
                }

            ]
        }
        return {
            myForm,
            dataForm,
            libDocData
        }
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
